<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Edit</span></span>
        <span>Cell and Row editing provides a rapid and user friendly way to manipulate data.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-toast [style]="{marginTop: '80px'}"></p-toast>

    <h3 class="first">Cell Editing</h3>
    <p-table [value]="cars1">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <tr>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.vin">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.vin}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="{'width':'100%'}"></p-dropdown>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.brand}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.color">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.color}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Row Editing</h3>
    <p-table [value]="cars2" dataKey="vin" editMode="row">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
                <th style="width:8em"></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="rowData">
                <td>
                    {{rowData.vin}}
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.year" required [ngStyle]="{'width':'100%'}">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="{'width':'100%'}"></p-dropdown>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.brand}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.color" [ngStyle]="{'width':'100%'}">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.color}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td style="text-align:center">
                    <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil" class="ui-button-info" (click)="onRowEditInit(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tableeditdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableEditDemo implements OnInit &#123;

    cars1: Car[];

    cars2: Car[];

    brands: SelectItem[];

    clonedCars: &#123; [s: string]: Car; &#125; = &#123;&#125;;

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 = cars);

        this.brands = [
            &#123;label: 'Audi', value: 'Audi'&#125;,
            &#123;label: 'BMW', value: 'BMW'&#125;,
            &#123;label: 'Fiat', value: 'Fiat'&#125;,
            &#123;label: 'Ford', value: 'Ford'&#125;,
            &#123;label: 'Honda', value: 'Honda'&#125;,
            &#123;label: 'Jaguar', value: 'Jaguar'&#125;,
            &#123;label: 'Mercedes', value: 'Mercedes'&#125;,
            &#123;label: 'Renault', value: 'Renault'&#125;,
            &#123;label: 'VW', value: 'VW'&#125;,
            &#123;label: 'Volvo', value: 'Volvo'&#125;
        ];
    &#125;

    onRowEditInit(car: Car) &#123;
        this.clonedCars[car.vin] = &#123;...car&#125;;
    &#125;

    onRowEditSave(car: Car) &#123;
        if (car.year > 0) &#123;
            delete this.clonedCars[car.vin];
            this.messageService.add(&#123;severity:'success', summary: 'Success', detail:'Car is updated'&#125;);
        &#125;
        else &#123;
            this.messageService.add(&#123;severity:'error', summary: 'Error', detail:'Year is required'&#125;);
        &#125;
    &#125;

    onRowEditCancel(car: Car, index: number) &#123;
        this.cars2[index] = this.clonedCars[car.vin];
        delete this.clonedCars[car.vin];
    &#125;

&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tableeditdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-table [value]="cars"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData&gt;
        &lt;tr&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input pInputText type="text" [(ngModel)]="rowData.vin"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.vin&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input pInputText type="text" [(ngModel)]="rowData.year" required&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.year&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="&#123;'width':'100%'&#125;"&gt;&lt;/p-dropdown&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.brand&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input pInputText type="text" [(ngModel)]="rowData.color"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.color&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Row Editing&lt;/h3&gt;
&lt;p-table [value]="cars2" dataKey="vin"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
            &lt;th style="width:8em"&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex"&gt;
        &lt;tr [pEditableRow]="rowData"&gt;
            &lt;td&gt;
                &#123;&#123;rowData.vin&#125;&#125;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input pInputText type="text" [(ngModel)]="rowData.year" required&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.year&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="&#123;'width':'100%'&#125;"&gt;&lt;/p-dropdown&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.brand&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input pInputText type="text" [(ngModel)]="rowData.color"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        &#123;&#123;rowData.color&#125;&#125;
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td style="text-align:center"&gt;
                &lt;button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil" class="ui-button-info" (click)="onRowEditInit(rowData)"&gt;&lt;/button&gt;
                &lt;button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"&gt;&lt;/button&gt;
                &lt;button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"&gt;&lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>